<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="../../static/css/bootstrap.css">
    <link rel="stylesheet" href="../../static/css/doublebox-bootstrap.css">

    <!-- Javascript -->
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/bootstrap.min.js"></script>
    <script src="../../static/js/doublebox-bootstrap.js"></script>
    <script src="../../static/js/layer/layer.js"></script>
</head>
<body>
<div style="padding: 25px 15px 25px 45px;">
    <select id="doublebox" name="doublebox" multiple="multiple" size="5">
        <option value="1">ceshi0</option>
        <option value="2">ceshi1</option>
        <option value="3" selected="selected">test0</option>
        <option value="4">test1</option>
        <option value="5">test2</option>
        <option value="6" selected="selected">test4</option>
        <option value="7">test3</option>
        <option value="8" selected="selected">test5</option>
        <option value="9">test6</option>
    </select>
    <div style="color: #bbbbbb;font-size: 1rem;padding-top: 15px;">双击直接选择，按ctrl+单击可多选，右侧按钮上移或下移，调整顺序</div>
    <div style="margin-top: 50px;">
        <button id="submit" type="button" class="btn btn-primary">确定</button>
        <button id="cancel" type="button" class="btn" style="color:#ffffff;">取消</button>
    </div>
</div>
<script>
    $(function () {
        var $doublebox = $('#doublebox').doublebox({
            nonSelectedListLabel: '可选择',
            selectedListLabel: '已选择',
            filterPlaceHolder: '搜索',
            moveSelectedLabel: '添加所选',
            moveAllLabel: '添加全部',
            removeSelectedLabel: '删除所选',
            removeAllLabel: '删除全部',
            preserveSelectionOnMove: 'moved',
            moveOnSelect: false,
            doubleMove: true
        });

        $("#submit").on('click', function () {
            console.log($doublebox.getSelectedOptions().split(','));
            alert($doublebox.getSelectedOptions().split(','));
        });

        $("#cancel").on('click', function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭窗口
        });

    });
</script>
</body>
</html>